bwc9876.dev
Files for my website
bwc9876.dev
1---
2import CowSay from "@components/blog/CowSay.astro";
3import Layout from "@layouts/Layout.astro";
4import { type CollectionEntry, getCollection, render } from "astro:content";
5export const getStaticPaths = async () => {
6 const posts = await getCollection("posts");
7 return posts.map((entry) => ({
8 params: { slug: entry.id },
9 props: { entry }
10 }));
11};
12
13const { entry } = Astro.props as { entry: CollectionEntry<"posts"> };
14const { Content, headings } = await render(entry);
15---
16
17<Layout title={entry.data.title} description={entry.data.summary}>
18 <h1 class="gradient-text">{entry.data.title}</h1>
19 <div class="wrapper">
20 <div class="toc-wrapper">
21 <nav aria-labelledby="on-this-page" class="toc">
22 <h2 id="on-this-page">On This Page</h2>
23 <ul>
24 {
25 headings.map((h) => (
26 <li>
27 <a href={`#${h.slug}`}>{h.text}</a>
28 </li>
29 ))
30 }
31 </ul>
32 </nav>
33 </div>
34 <div>
35 <CowSay text={entry.data.cowsay} />
36 <Content />
37 </div>
38 </div>
39</Layout>
40
41<style>
42 div.wrapper {
43 display: flex;
44 flex-direction: column;
45 gap: var(--6);
46
47 :first-child {
48 min-width: min-content;
49 }
50
51 :last-child {
52 min-width: 0;
53 }
54 }
55
56 @media (min-width: 1200px) {
57 div.wrapper {
58 flex-direction: row;
59 }
60 }
61
62 div.toc-wrapper {
63 nav {
64 position: sticky;
65 top: var(--4);
66
67 h2 {
68 margin-top: 0;
69 }
70
71 ul {
72 display: flex;
73 flex-direction: column;
74 gap: var(--small);
75 padding-left: 0;
76 width: 100%;
77
78 li {
79 width: 100%;
80 border-left: dashed 2px var(--accent);
81 padding-left: var(--small);
82 list-style-type: none;
83 font-size: var(--2);
84 white-space: nowrap;
85
86 a {
87 text-decoration: none;
88 }
89
90 &.current,
91 &:hover {
92 border-left-style: solid;
93 }
94 }
95 }
96 }
97 }
98</style>
99
100<style is:global>
101 main {
102 pre {
103 padding: var(--small);
104 border-radius: 5px;
105 box-sizing: border-box;
106 background-color: color(
107 from var(--background) srgb calc(r / 2) calc(g / 2) calc(b / 2)
108 ) !important;
109 overflow-x: auto;
110 width: 100%;
111 }
112
113 img {
114 box-sizing: border-box;
115 border-radius: 5px;
116 max-width: 100%;
117 height: auto;
118 box-shadow: color(from var(--accent) srgb r g b / 0.2) 0 0 6px;
119 }
120 }
121</style>